<template>
    <div>
       <el-card>
           <el-table :data="SkuList" border >
            <el-table-column label="序号"  type="index" width="100 " >

            </el-table-column>
            <el-table-column label="名称 "  width="120" prop="skuName">

            </el-table-column>
            <el-table-column label="描述"  width="120" prop="skuDesc"></el-table-column>
            <el-table-column label="默认图片"  width="120" prop="skuName">
                <template v-slot="{row,$index}">

                    <div>
                        <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="重量"  width="120" prop="weight"></el-table-column>
            <el-table-column label="价格"  width="120" prop="price"></el-table-column>
            <el-table-column label="操作"   >
                <template #="{row,$index}">
                    <div>
                        <el-button type="danger" :icon="Top" size="small" v-if="!(row.isSale==1)"  @click="onSaleAndCancel(row)" ></el-button>
                        <el-button type="primary" :icon="Bottom" size="small" v-else @click="onSaleAndCancel(row)"></el-button>
                        <el-button type="warning" :icon="Edit" size="small" @click="ElMessage.warning('正在开发中。。。')"> </el-button>
                        <el-button type="info" :icon="InfoFilled" size="small"  @click="getSkuInfo(row.id)"></el-button>
                        <el-button type="danger" :icon="Delete" size="small" @click="deleteSKu(row.id)"></el-button>
                    </div>
                </template>
            </el-table-column>
           </el-table>  
           <el-pagination
           style="margin:10px 0"
           v-model:current-page="page"
           v-model:page-size="limit"
           :page-sizes="[3 , 5, 7, 9]"
           :small="true"
           :disabled="false"
           :background="true"
           layout=",prev, pager, next, jumper,->,sizes, total"
           :total="total"
           @current-change="getSkuList"
           @size-change="getSkuList"
       
         />
    <el-drawer
    size="50%"
    v-model="dialog"
    :with-header="false"
   
  >
   <el-row>
    <el-col :span="6">
        SKU名称
    </el-col>
    <el-col :span="18">
        {{ skuInfo?.skuName}}

    </el-col>
   </el-row>
   <el-row>
    <el-col :span="6">
        SKU描述
    </el-col>
    <el-col :span="18">
        {{ skuInfo?.skuDesc }}

    </el-col>
   </el-row>
   <el-row>
    <el-col :span="6">
        SKU价格
    </el-col>
    <el-col :span="18">
        {{ skuInfo?.price }}

    </el-col>
   </el-row>
   <el-row>
    <el-col :span="6">
        平台属性
    </el-col>
    <el-col :span="18">
        <el-tag size="small" type="success" v-for="item in skuInfo.skuAttrValueList" :key="item.id" style="margin-right:5px">{{item.attrName }}--{{ item.valueName }}</el-tag>

    </el-col>
   </el-row>
   <el-row>
    <el-col :span="6">
        销售属性
    </el-col>
    <el-col :span="18">
        <el-tag size="small" type="success" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id" style="margin-right:5px">{{item.saleAttrName }}--{{ item.saleAttrValueName }}</el-tag>

    </el-col>
   </el-row>
   <el-row>
    <el-col :span="6">
        商品图片
    </el-col>
    <el-col :span="18" style="margin:50px 0px">
        <el-carousel trigger="click" height="400px" style="width:400px"  >
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="" style="width:400px;height:400px">
            </el-carousel-item>
          </el-carousel>

    </el-col>
   </el-row>
  </el-drawer>
       </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref,reactive } from 'vue';
import { reqSkuList,reqOnSaleOrCancel,reqSkuInfo,reqDeleteSku } from '../,,/../../../api/product/sku/index';
import { Plus,Delete,Top,Edit,InfoFilled,Bottom } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';

const page=ref(1)
const limit=ref(8)
const total=ref(10)
const SkuList=ref([])
const dialog=ref(false)
const skuInfo=ref<any>({})

onMounted(()=>{
    getSkuList()

})
// 获取SKUlist列表
const getSkuList=async ()=>{
   let  res:any= await reqSkuList(page.value,limit.value)
  
   SkuList.value=res.records
   total.value=res.total
   
 }
// 上线按钮和下线按钮
const onSaleAndCancel=async(row:any)=>{
  
   
    
    try {
        await reqOnSaleOrCancel(row.id,row.isSale)
        ElMessage({
            type:'success',
            message:row.isSale==1?'商品下架成功':'商品上架'
        })
        getSkuList()
    } catch (error) {
        ElMessage.error('失败了')
        
    }


}
// 获取SKu详情
const getSkuInfo=async(skuId:number)=>{
    dialog.value=true

    try {
       let res:any= await reqSkuInfo(skuId)
       skuInfo.value=res

    } catch (error) {
        
    }
    
}
// 删除SKu
const deleteSKu= async(skuId:number)=>{
   try {
    await reqDeleteSku(skuId)
    ElMessage.success('删除成功')
    getSkuList()
   } catch (error) {
    
   } 

}




</script>

<style lang="scss" scoped>
::v-deep(.el-carousel__button) {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
}
.demonstration {
    color: var(--el-text-color-secondary);
  }
  
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

</style>
